<template>
    <el-form ref="form" :model="user" :rules="rules" label-width="1.4rem">
        <div class="title">
            <span class="tag-blue bgBlue mr_10"></span>
            <span>基本信息</span>
        </div>
        <div class="person-from">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="nickName">
                        <el-input v-model="user.nickName" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="phonenumber">
                        <el-input v-model="user.phonenumber" maxlength="11" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="user.email" maxlength="50" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-radio-group v-model="user.sex">
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="identification">
                        <el-input v-model="user.identification" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属单位">
                        <el-input v-model="orgName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门">
                        <el-input v-model="deptName" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属角色">
                        <el-input v-model="role" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属岗位">
                        <el-input v-model="post" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <div class="title">
            <span class="tag-blue bgBlue mr_10"></span>
            <span>职务职级</span>
        </div>
        <div class="person-from">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="职务" prop="position">
                        <treeselect v-model="user.position" :options="positionOptions" :normalizer="normalizer" placeholder="选择职务" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职级" prop="positionLevel">
                        <treeselect v-model="user.positionLevel" :options="treeOptions" placeholder="选择职级" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任现职时间" prop="dateOfAppointment">
                        <el-date-picker v-model="user.dateOfAppointment" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择任现职时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政治面貌" prop="political">
                        <treeselect v-model="user.political" :options="politicalOptions" :normalizer="normalizer" placeholder="选择政治面貌" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="从事或分管工作" prop="workContent">
                        <el-input type="textarea" v-model="user.workContent" />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <el-form-item class="person-btn">
            <el-button type="primary" size="mini" @click="submit">保存</el-button>
            <!--            <el-button type="danger" size="mini" @click="close">关闭</el-button>-->
        </el-form-item>
    </el-form>
</template>

<script>
/*import {getUserProfile, updateUserProfile} from "@/api/system/user";
import { listData, getData, delData, addData, updateData } from "@/api/appraisal/commonTree/data";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listDictData} from "@/api/system/dict/data";
import {getInfo} from "@/api/login";*/
import Treeselect from '@riophae/vue-treeselect'
import { updateUser } from '@/api/data'

export default {
    components: { Treeselect },
    props: {
        user: {
            type: Object
        }
    },
    data() {
        return {
            //职级
            treeOptions: [],
            //职务
            positionOptions: [],
            //政治面貌
            politicalOptions: [],
            deptName: '',
            orgName: '',
            role: {},
            post: {},
            // 表单校验
            rules: {
                nickName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                email: [
                    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
                    {
                        type: 'email',
                        message: '请输入正确的邮箱地址',
                        trigger: ['blur', 'change']
                    }
                ],
                phonenumber: [
                    { required: true, message: '手机号码不能为空', trigger: 'blur' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    }
                ],
                identification: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' },
                    {
                        pattern:
                            /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: '请输入合法身份证号',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    updateUser(this.user).then((response) => {
                        this.$message(response.data.msg)
                    })
                }
            })
        },
        close() {
            // this.$tab.closePage();
        },
        /**查找职级生成下拉树**/
        selectPositionLevel() {
            // let p = {params: {pid: 1003}};
            // listData(p).then(res=>{
            //   this.treeOptions=this.handleTree(res.rows,'id','pid','children','label')
            // })
        },
        /**查找职务**/
        selectPosition() {
            // listDictData({dictType:'sys_user_position'}).then(res=>{
            //   this.positionOptions=res.rows
            // })
        },
        /**查找政治面貌**/
        selectPolitical() {
            // listDictData({dictType:'sys_user_political'}).then(res=>{
            //   this.politicalOptions=res.rows
            // })
        },
        /** 转换字典数据结构 */
        normalizer(node) {
            // if (node.children && !node.children.length) {
            //   delete node.children;
            // }
            // return {
            //   id: node.dictCode,
            //   label: node.dictLabel
            // };
        }
    },
    created() {
        this.selectPositionLevel()
        this.selectPosition()
        this.selectPolitical()
    }
}
</script>
